<script setup>
import { defineProps, ref, watch } from "vue";

const map = {
  "-5": 0,
  "-4": 1,
  "-3": 2,
  "-2": 3,
  "-1": 4,
  0: 5,
  1: 6,
  2: 7,
  3: 8,
  4: 9,
  5: 10,
};
const currentStep = ref(0);
const props = defineProps({
  step: {
    type: Number,
    default: "0",
  },
});
watch(
  () => props.step,
  (newVal) => {
    console.log(map[newVal]);
    currentStep.value = map[newVal];
  },
  { deep: true, immediate: true }
);
</script>

<template>
  <view class="progress">
    <image
      :src="'https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/progress.svg'"
      class="selectBox"
    />
    <view :class="['bolus', `p${currentStep}`]"></view>
  </view>
</template>

<style scoped>
.progress {
  width: 100%;
  height: 14px;
  position: relative;
}

.selectBox {
  width: 100%;
  height: 14px;
}

.bolus {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 0;
  background: #000;
}

.p0 {
  left: 0;
}

.p1 {
  left: calc((100% - 12px) / 10);
}

.p2 {
  left: calc((100% - 12px) / 10 * 2);
}
.p3 {
  left: calc((100% - 12px) / 10 * 3);
}
.p4 {
  left: calc((100% - 12px) / 10 * 4);
}
.p5 {
  left: calc((100% - 12px) / 10 * 5);
}
.p6 {
  left: calc((100% - 12px) / 10 * 6);
}
.p7 {
  left: calc((100% - 12px) / 10 * 7);
}
.p8 {
  left: calc((100% - 12px) / 10 * 8);
}
.p9 {
  left: calc((100% - 12px) / 10 * 9);
}
.p10 {
  right: 0;
  left: unset;
}
</style>
